<template>
    <div class="p-2">
        <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
                    :leave-active-class="proxy?.animate.searchAnimate.leave">
            <div class="search" v-show="showSearch">
                <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
                                <el-form-item label="订单编码" prop="orderCode">
                                    <el-input v-model="queryParams.orderCode" placeholder="请输入订单编码"
                                              clearable style="width: 240px" @keyup.enter="handleQuery"/>
                                </el-form-item>
                                <el-form-item label="下单时间" prop="xdDate">
                                    <el-date-picker clearable
                                                    v-model="queryParams.xdDate"
                                                    type="date"
                                                    value-format="YYYY-MM-DD"
                                                    placeholder="请选择下单时间"
                                    />
                                </el-form-item>
                                <el-form-item label="订单总额" prop="money">
                                    <el-input v-model="queryParams.money" placeholder="请输入订单总额"
                                              clearable style="width: 240px" @keyup.enter="handleQuery"/>
                                </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </transition>

        <el-card shadow="never">
            <template #header>
                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button type="primary" plain icon="Plus" @click="handleAdd"
                                   v-hasPermi="['demo:orderMain:add']">新增
                        </el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()"
                                   v-hasPermi="['demo:orderMain:edit']">修改
                        </el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()"
                                   v-hasPermi="['demo:orderMain:remove']">删除
                        </el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="warning" plain icon="Download" @click="handleExport"
                                   v-hasPermi="['demo:orderMain:export']">导出
                        </el-button>
                    </el-col>
                    <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
                </el-row>
            </template>

            <el-table v-loading="loading" :data="orderMainList" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center"/>
                        <el-table-column label="主键" align="center" prop="id" v-if="true"/>
                        <el-table-column label="订单编码" align="center" prop="orderCode"/>
                        <el-table-column label="下单时间" align="center" prop="xdDate" width="180">
                            <template #default="scope">
                                <span>{{ parseTime(scope.row.xdDate, '{y}-{m}-{d}') }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="订单总额" align="center" prop="money"/>
                        <el-table-column label="备注" align="center" prop="remark"/>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template #default="scope">
                        <el-tooltip content="修改" placement="top">
                            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                                       v-hasPermi="['demo:orderMain:edit']"></el-button>
                        </el-tooltip>
                        <el-tooltip content="删除" placement="top">
                            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
                                       v-hasPermi="['demo:orderMain:remove']"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>

            <pagination
                v-show="total>0"
                :total="total"
                v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"
                @pagination="getList"
            />
        </el-card>
        <!-- 添加或修改测试订单主表对话框 -->
        <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
            <el-form ref="orderMainFormRef" :model="form" :rules="rules" label-width="80px">
                            <el-form-item label="订单编码" prop="orderCode">
                                <el-input v-model="form.orderCode" placeholder="请输入订单编码"/>
                            </el-form-item>
                            <el-form-item label="下单时间" prop="xdDate">
                                <el-date-picker clearable
                                                v-model="form.xdDate"
                                                type="datetime"
                                                value-format="YYYY-MM-DD HH:mm:ss"
                                                placeholder="请选择下单时间">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="订单总额" prop="money">
                                <el-input v-model="form.money" placeholder="请输入订单总额"/>
                            </el-form-item>
                            <el-form-item label="备注" prop="remark">
                                <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
                            </el-form-item>
                    <el-divider content-position="center">订单商品子表信息</el-divider>
                    <el-row :gutter="10" class="mb8">
                        <el-col :span="1.5">
                            <el-button type="primary" icon="Plus" @click="handleAddTestOrderGoods">添加</el-button>
                        </el-col>
                        <el-col :span="1.5">
                            <el-button type="danger" icon="Delete" @click="handleDeleteTestOrderGoods">删除</el-button>
                        </el-col>
                    </el-row>
                    <el-table :data="testOrderGoodsList" :row-class-name="rowTestOrderGoodsIndex"
                              @selection-change="handleTestOrderGoodsSelectionChange" ref="testOrderGoods">
                        <el-table-column type="selection" width="50" align="center"/>
                        <el-table-column label="序号" align="center" prop="index" width="50"/>
                                <el-table-column label="商品名字" prop="goodName" width="150">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.goodName" placeholder="请输入商品名字"/>
                                    </template>
                                </el-table-column>
                                <el-table-column label="价格" prop="price" width="150">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.price" placeholder="请输入价格"/>
                                    </template>
                                </el-table-column>
                                <el-table-column label="数量" prop="num" width="150">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.num" placeholder="请输入数量"/>
                                    </template>
                                </el-table-column>
                                <el-table-column label="单品总价" prop="zongPrice" width="150">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.zongPrice" placeholder="请输入单品总价"/>
                                    </template>
                                </el-table-column>
                                <el-table-column label="商品编码" prop="goodCode" width="150">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.goodCode" placeholder="请输入商品编码"/>
                                    </template>
                                </el-table-column>
                    </el-table>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup name="OrderMain" lang="ts">
    import {
        listOrderMain,
        getOrderMain,
        delOrderMain,
        addOrderMain,
        updateOrderMain } from '@/api/demo/orderMain';
    import {
            OrderMainVO,
            OrderMainQuery,
            OrderMainForm
    } from '@/api/demo/orderMain/types';

    const {proxy} = getCurrentInstance() as ComponentInternalInstance;

    const orderMainList = ref < OrderMainVO[] > ([]);
    const buttonLoading = ref(false);
    const loading = ref(true);
    const showSearch = ref(true);
    const ids = ref < Array < string | number >> ([]);
    const single = ref(true);
    const multiple = ref(true);
    const total = ref(0);

    const queryFormRef = ref < ElFormInstance > ();
    const orderMainFormRef = ref < ElFormInstance > ();

    const dialog = reactive < DialogOption > ({
        visible: false,
        title: ''
    });

    const initFormData: OrderMainForm = {
                    orderCode: undefined,
                    xdDate: undefined,
                    money: undefined,
                    remark: undefined
    }
    const data = reactive < PageData < OrderMainForm, OrderMainQuery
    >>
    ({
        form: {...initFormData},
        queryParams: {
            pageNum: 1,
            pageSize: 10,
                    orderCode: undefined,
                    xdDate: undefined,
                    money: undefined,
        params:
    {
    }
    },
    rules: {
                    orderCode: [
                    {
                        required: true, message: "订单编码不能为空", trigger: "blur" }
                ],
                    xdDate: [
                    {
                        required: true, message: "下单时间不能为空", trigger: "blur" }
                ],
                    money: [
                    {
                        required: true, message: "订单总额不能为空", trigger: "blur" }
                ],
                    remark: [
                    {
                        required: true, message: "备注不能为空", trigger: "blur" }
                ]
    }
    })
    ;

    const {queryParams, form, rules} = toRefs(data);

    /** 查询测试订单主表列表 */
    const getList = async () => {
        loading.value = true;
        const res = await listOrderMain(queryParams.value);
            orderMainList.value = res.rows;
        total.value = res.total;
        loading.value = false;
    }

    /** 取消按钮 */
    const cancel = () => {
        reset();
        dialog.visible = false;
    }

    /** 表单重置 */
    const reset = () => {
        form.value = {...initFormData};
            orderMainFormRef.value?.resetFields();
    }

    /** 搜索按钮操作 */
    const handleQuery = () => {
        queryParams.value.pageNum = 1;
        getList();
    }

    /** 重置按钮操作 */
    const resetQuery = () => {
        queryFormRef.value?.resetFields();
        handleQuery();
    }

    /** 多选框选中数据 */
    const handleSelectionChange = (selection: OrderMainVO[]) => {
        ids.value = selection.map(item => item.id);
        single.value = selection.length != 1;
        multiple.value = !selection.length;
    }

    /** 新增按钮操作 */
    const handleAdd = () => {
        reset();
        dialog.visible = true;
        dialog.title = "添加测试订单主表";
    }

    /** 修改按钮操作 */
    const handleUpdate = async (row
    ? : OrderMainVO
    ) =>
    {
        reset();
        const _id = row?.id || ids.value[0]
        const res = await getOrderMain(_id);
        Object.assign(form.value, res.data);
        dialog.visible = true;
        dialog.title = "修改测试订单主表";
    }

    /** 提交按钮 */
    const submitForm = () => {
            orderMainFormRef.value?.validate(async (valid: boolean) => {
            if (valid) {
                buttonLoading.value = true;
                if (form.value.id) {
                    await updateOrderMain(form.value).finally(() => buttonLoading.value = false);
                } else {
                    await addOrderMain(form.value).finally(() => buttonLoading.value = false);
                }
                proxy?.$modal]]
                #.msgSuccess("修改成功");
                dialog.visible = false;
                await getList();
            }
        });
    }

    /** 删除按钮操作 */
    const handleDelete = async (row
    ? : ${BusinessName}VO
    ) =>
    {
        const _$
        {
            pkColumn.javaField
        }
        s = row?.$
        {
            pkColumn.javaField
        }
    ||
        ids.value;
        await proxy?.#[[$modal]]
        #.confirm('是否确认删除${functionName}编号为"' + _$
        {
            pkColumn.javaField
        }
        s + '"的数据项？'
    ).
        finally(() => loading.value = false);
        await del$
        {
            BusinessName
        }
        (_$
        {
            pkColumn.javaField
        }
        s
    )
        ;
        proxy?.#[[$modal]]
        #.msgSuccess("删除成功");
        await getList();
    }

    #if($table.sub)

    /** ${subTable.functionName}序号 */
    function row$ {
        subClassName
    }

    Index({row, rowIndex})
    {
        row.index = rowIndex + 1;
    }

    /** ${subTable.functionName}添加按钮操作 */
    function handleAdd$ {
        subClassName
    }

    ()
    {
        let obj = {};
        #foreach($column in $subTable.columns)
        #if($column.pk || $column.javaField == ${subTableFkclassName})
        #elseif($column.list && "" != $javaField)
        obj.$column.javaField = "";
        #end
        #end
        ${subclassName}
        List.value.push(obj);
    }

    /** ${subTable.functionName}删除按钮操作 */
    function handleDelete$ {
        subClassName
    }

    ()
    {
        if (checked${
            subClassName
        }
    .
        value.length == 0
    )
        {
            proxy.#[[$modal]]
            #.msgError("请先选择要删除的${subTable.functionName}数据");
        }
    else
        {
            const ${subclassName}s = ${subclassName}List.value;
            const checked$
            {
                subClassName
            }
            s = checked$
            {
                subClassName
            }
        .
            value;
            ${subclassName}
            List.value = ${subclassName}s.filter(function (item) {
                return checked$
                {
                    subClassName
                }
                s.indexOf(item.index) == -1
            });
        }
    }

    /** 复选框选中数据 */
    function handle$ {
        subClassName
    }

    SelectionChange(selection)
    {
        checked$
        {
            subClassName
        }
    .
        value = selection.map(item => item.index)
    }

    #end
    
    /** 导出按钮操作 */
    const handleExport = () => {
        proxy?.download('${moduleName}/${businessName}/export', {
            ...queryParams.value
        }, `${businessName}_#[[${new Date().getTime()}.xlsx`)
    }

    onMounted(() => {
        getList();
    });
</script>
